<template>
    <div ref="chartElement" style="height:100%; width: 100%;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'ChartBlock',
    data() {
        return {
            chart: null,
            resizeObserver: null,
        }
    },
    methods: {
        setOption(option, clear = false) {
            if (this.chart != null) {
                clear && this.chart.clear();
                this.chart.setOption(option);
            }
        }
    },
    mounted() {
        this.$nextTick(function () {
            // 初始化统计图
            this.chart = echarts.init(this.$refs.chartElement);
            // 添加容器改变监听
            this.resizeObserver = new ResizeObserver(_.debounce(this.chart.resize, 100));
            this.resizeObserver.observe(this.$refs.chartElement, {box: 'border-box'});
        })
    },
    beforeDestroy() {
        // 移除容器改变监听
        this.resizeObserver.disconnect();
    }
}
</script>
